<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>mvt from pg</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <!--    <script src='mapbox-gl.js'></script>-->
    <!--    <link href='mapbox-gl.css' rel='stylesheet' />-->

    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet'/>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<div id='map'>
    <button onclick="re()">reflash</button>
</div>
<script>
    mapboxgl.accessToken = "pk.eyJ1IjoibW9yYWwiLCJhIjoiY2pxbHE3OWQxMDQydzQ5cDd0cGg2bm5mciJ9.GWcTofDB7PJKzmF3C4mSeg";
    var map = new mapboxgl.Map({
        container: 'map',
        // style: 'mapbox://styles/mapbox/streets-v11',
        style: 'mapbox://styles/mapbox/light-v9',
        center: [-88,26],
        zoom: 8
    });

    var tbName = 'tmp_socat_2021'
    map.on('load', function () {
        map.addSource(tbName, {
            'type': 'vector',
            'tiles': ['http://47.99.91.184:8091/tile/mvt/' + tbName + '/{z}/{x}/{y}.mvt']
            // 'tiles': ['http://localhost:8091/tile/mvt/' + tbName + '/{z}/{x}/{y}.mvt']
        });

        map.addLayer({
            'id': tbName,
            'source': tbName,
            'source-layer': tbName,
            'type': 'circle',
            "paint": {
                'circle-radius': 5,
                'circle-color': 'rgb(20,200,20)'
            }
        });

        //     map.addLayer({
        //         'id': tbName,
        //         'source': tbName,
        //         'source-layer':tbName,
        //         'type': 'fill',
        //         "paint": {
        //
        // 'fill-color':'rgb(20,200,20)',
        // 'fill-outline-color':'rgb(222,50,214)',
        //             //"fill-color":"#990055",
        //             //"fill-outline-color":"#ffffff"
        //             "fill-opacity":0.8
        //         }
        //     });

    });

    function re() {
        // map.panTo([]);
        map.zoomTo(12);
    }


    // 'match',
    //     ['get','tag'],
    //     "011","#ffff64",
    //     "012","#ffff96",
    //     "013","#ffffc8",
    //     "021","#f5d228",
    //     "022","#ffc850",
    //     "023","#fab914",
    //     "031","#288c00",
    //     "032","#55b464",
    //     "033","#8cd782",
    //     "041","#aabe1e",
    //     "042","#96d232",
    //     "043","#c8dc64",
    //     "051","#eb96a0",
    //     "052","#eb96a0",
    //     "053","#eb96a0",
    //     "054","#eb96a0",
    //     "061","#d29187",
    //     "062","#d29187",
    //     "063","#d29187",
    //     "071","#f06e7d",
    //     "072","#f06e7d",
    //     "081","#ffaac8",
    //     "082","#ffaac8",
    //     "083","#ffaac8",
    //     "084","#ffaac8",
    //     "085","#ffaac8",
    //     "086","#ffaac8",
    //     "087","#ffaac8",
    //     "088","#ffaac8",
    //     "091","#f064c8",
    //     "092","#f064c8",
    //     "093","#f064c8",
    //     "094","#f064c8",
    //     "095","#f064c8",
    //     "101","#b2aab0",
    //     "102","#aa5550",
    //     "103","#b4501e",
    //     "104","#aa5550",
    //     "105","#eb8282",
    //     "106","#eb8282",
    //     "107","#eb8282",
    //     "111","#96f0ff",
    //     "112","#96f0ff",
    //     "113","#96f0ff",
    //     "114","#a0cdf0",
    //     "115","#d7ffff",
    //     "116","#d7ffff",
    //     "117","#a0cdf0",
    //     "118","#e68264",
    //     "119","#87cdf0",
    // "121","#e1dce1",
    // "122","#dcb482",
    // "123","#000000",
    // "124","#c8cdc8",
    // "125","#b9b9be",
    // "126","#c8beaa",
    // "127","#d7c8b9",
    // "201","#dc6478",
    // "202","#dc6478",
    // "203","#e68ca0",
    // "204","#e67882",
    // "205","#e67882",
    // "rgb(139,138,2)"

</script>

</body>
</html>